<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
  <meta charset="UTF-8">
  <meta name="Author" content="haley">
  <meta name="Keywords" content="前端最常用的UI插件,animate.css,css动画">
  <meta name="Description" content="最常用的UI插件">
  <script crossorigin="anonymous" integrity="sha384-6ePHh72Rl3hKio4HiJ841psfsRJveeS+aLoaEf3BWfS+gTF0XdAqku2ka8VddikM" src="https://lib.baomitu.com/jquery/1.11.3/jquery.min.js"></script>
  <link crossorigin="anonymous" integrity="sha384-pdapHxIh7EYuwy6K7iE41uXVxGCXY0sAjBzaElYGJUrzwodck3Lx6IE2lA0rFREo" href="https://lib.baomitu.com/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
  <link href="../../css/page.css" rel="stylesheet">
  <script crossorigin="anonymous" integrity="sha384-pPttEvTHTuUJ9L2kCoMnNqCRcaMPMVMsWVO+RLaaaYDmfSP5//dP6eKRusbPcqhZ" src="https://lib.baomitu.com/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script crossorigin="anonymous" integrity="sha384-8t+aLluUVnn5SPPG/NbeZCH6TWIvaXIm/gDbutRvtEeElzxxWaZN+G/ZIEdI/f+y" src="https://lib.baomitu.com/vue/2.6.10/vue.min.js"></script>
  <script src="../../js/page.js"></script>
  <script src="../../js/changeTitle.js"></script>
  <link href="../../imgs/favicon.ico" rel="shortcut icon">
  <script src="../../js/goToHome.js"></script>
  <title></title>
  <script>
    var data={
      title:'前端动画css组件animate.css的演示及使用方法',
      content:{
        intro:{
          list:[
            {
              title:'使用说明：',
              className:'bs-callout-info',
              list:[
                {title:'基础配置：',content:'animate.css'}
                ,{title:'需要的代码：',content:'animate.css文件'}
                ,{title:'如何使用：',content:'按照下面的使用方法使用'}
              ]
            }

          ]
        }
      }
    };
  </script>
    <style>
    * { margin: 0; padding: 0;}
    ul { list-style-type: none;}
    body { font: 14px "Microsoft Yahei"; overflow-x: hidden;}
    h1 { width: 900px; margin: 40px auto 100px; font: 32px "Microsoft Yahei"; text-align: center;}
    h2 { font: 96px "Microsoft Yahei"; font-weight: 500; text-align: center; color: #f35626;}
    .wrap p { margin-bottom: 100px; font: 30px "Microsoft Yahei"; text-align: center; color: #999;}
    .list { width: 1000px; margin: 0 auto;}
    dl { width: 1000px; margin: 10px auto; overflow: hidden;}
    dt { float: left; width: 1000px; padding: 5px 0; border-bottom: 1px solid #ddd; font-weight: 700;}
    dd { float: left; margin: 10px 10px 0 0; padding: 5px 10px; background-color: #eee; cursor: pointer;}

    .dowebok-explain  { display: none; margin-top: 20px; margin-bottom: 20px; font-size: 14px; text-align: center; color: #f50;}

    .tab {  margin: 0 auto; border: 1px solid #ddd;}
    .tabNav { padding-bottom: 10px; overflow: hidden; zoom: 1; background-color: #f5f5f5;}
    .tabNav li { float: left; margin: 10px 0 0 10px; display: inline;}
    .tabNav a { float: left; padding: 5px 10px; color: #444; text-decoration: none;}
    .tabNav .active a { color: #fff; background-color: #f35626;}

    .tabPane { display: none; overflow: hidden; zoom: 1;}
    .tabCnt .active { display: block;}
    .tabCnt { padding: 10px 20px 20px;}
    .tabPane li { float: left; margin: 10px 10px 0 0; padding: 5px 10px; background-color: #eee; cursor: pointer;}
    .tabPane .active { color: #f35626;}
    .listH{
    .list-style-type: decimal;padding-left:20px;
    }
    .listH>li{
      line-height: 2em;
    }
  </style>
</head>
<body>
<div id="page">
  <div class="container">
    <h3 class="text-center">{{title}}</h3>
    <div class="bs-callout" :class="item.className" v-for="item in content.intro.list">
      <h4>{{item.title}}</h4>
      <ul>
        <li v-for="item2 in item.list"><b>{{item2.title}}</b>{{item2.content}}</li>
      </ul>
    </div>
  </div>
  <script>
    var page = new Vue({
      el: '#page',
      data: data
    });
  </script>
</div>
<div class="container">
  <section class="panel panel-info">
    <div class="panel-heading">Animate.css动画演示</div>
    <div class="panel-body">
      <div class="row">
        <div class="col-sm-12">
          <div class="wrap">
            <h2 id="animate">Animate.css</h2>
            <p>——CSS3动画库</p>
          </div>
        </div>
        <p class="dowebok-explain">您的浏览器不支持 CSS3 animate 属性，所以您看不到任何效果，请使用 Firefox、Chrome 或 IE10</p>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <div class="tab">
            <ul class="tabNav">
              <li class="active"><a href="http://www.dowebok.com/">Attention Seekers</a></li>
              <li><a href="###">Bouncing Entrances</a></li>
              <li><a href="###">Bouncing Exits</a></li>
              <li><a href="###">Fading Entrances</a></li>
              <li><a href="###">Fading Exits</a></li>
              <li><a href="###">Flippers</a></li>
              <li><a href="###">Lightspeed</a></li>
              <li><a href="###">Rotating Entrances</a></li>
              <li><a href="###">Rotating Exits</a></li>
              <li><a href="###">Sliders</a></li>
              <li><a href="###">Specials</a></li>
            </ul>

            <div class="tabCnt">
              <ul class="tabPane active">
                <li>bounce</li>
                <li>flash</li>
                <li>pulse</li>
                <li>rubberBand</li>
                <li>shake</li>
                <li>swing</li>
                <li>tada</li>
                <li>wobble</li>
              </ul>

              <ul class="tabPane">
                <li>bounceIn</li>
                <li>bounceInDown</li>
                <li>bounceInLeft</li>
                <li>bounceInRight</li>
                <li>bounceInUp</li>
              </ul>

              <ul class="tabPane">
                <li>bounceOut</li>
                <li>bounceOutDown</li>
                <li>bounceOutLeft</li>
                <li>bounceOutRight</li>
                <li>bounceOutUp</li>
              </ul>

              <ul class="tabPane">
                <li>fadeIn</li>
                <li>fadeInDown</li>
                <li>fadeInDownBig</li>
                <li>fadeInLeft</li>
                <li>fadeInLeftBig</li>
                <li>fadeInRight</li>
                <li>fadeInRightBig</li>
                <li>fadeInUp</li>
                <li>fadeInUpBig</li>
              </ul>

              <ul class="tabPane">
                <li>fadeOut</li>
                <li>fadeOutDown</li>
                <li>fadeOutDownBig</li>
                <li>fadeOutLeft</li>
                <li>fadeOutLeftBig</li>
                <li>fadeOutRight</li>
                <li>fadeOutRightBig</li>
                <li>fadeOutUp</li>
                <li>fadeOutUpBig</li>
              </ul>

              <ul class="tabPane">
                <li>flip</li>
                <li>flipInX</li>
                <li>flipInY</li>
                <li>flipOutX</li>
                <li>flipOutY</li>
              </ul>

              <ul class="tabPane">
                <li>lightSpeedIn</li>
                <li>lightSpeedOut</li>
              </ul>

              <ul class="tabPane">
                <li>rotateIn</li>
                <li>rotateInDownLeft</li>
                <li>rotateInDownRight</li>
                <li>rotateInUpLeft</li>
                <li>rotateInUpRight</li>
              </ul>

              <h3></h3>
              <ul class="tabPane">
                <li>rotateOut</li>
                <li>rotateOutDownLeft</li>
                <li>rotateOutDownRight</li>
                <li>rotateOutUpLeft</li>
                <li>rotateOutUpRight</li>
              </ul>

              <ul class="tabPane">
                <li>slideInDown</li>
                <li>slideInLeft</li>
                <li>slideInRight</li>
                <li>slideOutLeft</li>
                <li>slideOutRight</li>
                <li>slideOutUp</li>
              </ul>

              <ul class="tabPane">
                <li>hinge</li>
                <li>rollIn</li>
                <li>rollOut</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">

          <div style="border:1px solid lightskyblue;margin:10px auto;padding:10px 20px;">
            <h3>使用方法：</h3>
            <ol class="listH">
              <li>给元素起个名字</li>
              <li>以这个名字加css样式</li>
              <li><u>animation-name</u>：slideInDown:动画名称</li>
              <li><u>animation-duration</u>：1s。动画执行一共需要花费的时间，单位ms或s</li>
              <li><u>animation-timing-function</u>：ease：动画执行时间曲线</li>
              <li>linear	动画从头到尾的速度是相同的。ease	默认。动画以低速开始，然后加快，在结束前变慢。ease-in	动画以低速开始。ease-out	动画以低速结束。ease-in-out	动画以低速开始和结束。cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。</li>
              <li><u>animation-delay</u>：.2：.2s后开始执行</li>
              <li><u>animation-iteration-count</u>：5:执行次数，infinite无限次；如果设置alternate，则来回算两次</li>
              <li><u>animation-direction</u>：alternate：属性定义是否应该轮流反向播放动画。如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。normal:默认值，动画正常播放</li>
            </ol>
            <p>animation: name duration timing-function delay iteration-count direction;</p>
            <p>animation: fadeInUpBig 1.2s linear .2s 1 normal;</p>
            <h3>html:</h3>
<pre>
  &lt;div id="b5-1"&gt;&lt;/div&gt;
  <hr>
  #b5-1{
    animation: slideInDown 1s ease .2s 5 alternate;
    -webkit-animation: slideInDown 1s ease .2s 5 alternate;
    -ms-animation: slideInDown 1s ease .2s 5 alternate;
    -o-animation: slideInDown 1s ease .2s 5 alternate;
    -moz-animation: slideInDown 1s ease .2s 5 alternate;
  }
</pre>
          </div>

        </div>
      </div>
    </div>
    <div class="panel-footer">
      <p class="vad">
        <a href="http://www.dowebok.com/" target="_blank">dowebok.com</a>
        <a href="http://www.dowebok.com/98.html" target="_blank">说 明</a>
        <a href="http://www.dowebok.com/98.html" target="_blank">下 载</a>
      </p>
      <style>
        .vad { margin: 50px 0 5px; font-family: Consolas,arial,宋体; text-align:center;}
        .vad a { display: inline-block; height: 36px; line-height: 36px; margin: 0 5px; padding: 0 50px; font-size: 14px; text-align:center; color:#eee; text-decoration: none; background-color: #222;}
        .vad a:hover { color: #fff; background-color: #000;}
      </style>
    </div>
  </section>
</div>
<script>
  $(function(){
    if($.browser&&$.browser.msie && $.browser.version < 10){
      $('.dowebok-explain').show();
    }

    var $animate = $('#animate');
    var $btn = $('.tabCnt').find('li');
    $btn.click(function(){
      $(this).addClass('active').siblings().removeClass('active');
      $animate.removeClass().addClass($(this).text() + ' animated infinite');
      setTimeout(removeClass, 1000);
    });

    function removeClass(){
      $animate.removeClass();
    }

    var $tabNavItem = $('.tabNav').find('a');
    var $tabPane = $('.tabPane');
    $tabNavItem.each(function(i){
      $(this).click(function(){
        $(this).parent().addClass('active').siblings().removeClass('active');
        $tabPane.eq(i).addClass('active').siblings().removeClass('active');
        return false;
      });
    });
  });
</script>
</body>
</html>
